#continue {
	--accent-color: var(--color-magenta);

	magenta-midi-file {
		height: 110px;
	}

	$shadowCount: 10;

	@mixin shadow($step){
		$outp: 0px 0px transparent;
		@for $i from 1 through $step {
			$inv_i: $shadowCount - $i;
			$col: rgba(255, 255, 255, $inv_i/$shadowCount);
			$offset: 12px;
			$outp: #{$outp}, $offset * $i 0px #{$col};
		}
		text-shadow: $outp;
	}

	#title {
		user-select: none;
		-webkit-app-region: no-drag;
	}

	#title span {
		animation: text-retract 0.2s ease-out;
		animation-fill-mode: forwards;
	}

	@keyframes text-extend {

		0% {
			text-shadow: 0px 0px white;
		}

		@for $i from 1 through $shadowCount {
			#{$i/$shadowCount*100}% {
				@include shadow($i);
			}
		}
	}

	@keyframes text-retract {

		0% {
			@include shadow($shadowCount);
		}

		100% {
			text-shadow: 0px 0px white;
		}
	}

	@keyframes text-animate {

		0% {
			text-shadow: 0px 0px white;
		}

		@for $i from 1 through $shadowCount {
			#{$i/$shadowCount*70}% {
				@include shadow($i);
			}
		}

		100% {
			text-shadow: 0px 0px white;
		}
	}

	#title:hover span {
		animation: text-extend 0.7s ease-in;
		animation-fill-mode: forwards;
	}

	#title:hover span {
		animation: text-extend 0.7s ease-in;
		animation-fill-mode: forwards;
	}

	#title.animate span {
		animation: text-animate 1.3s ease-in-out;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
	}

	.lower-controls {
		display: flex;
	}
}